$(function() {

    // 获取地址栏中的参数
    var categoryid = GetQueryString("categoryid");
    var pageid = GetQueryString("pageid");

    // 动态渲染produce 的 title 标签    
    createProduceTitle(categoryid);

    //动态生成商品列表
    createProduceList(categoryid, pageid);

    // 点击上下页按钮 重新向后台请求数据 加载页面
    $(".page a").click(function() {
        // 获取到给a 标签的自定义属性  page是上一页或者下一页  total 是总页数
        var page = parseInt($(this).attr("data-page"));
        var total = parseInt($(this).attr("data-total"));
        if (page >= 1 && page <= total) {
            createProduceList(categoryid, page);
        }
        // 下拉框的选中效果 需要在ajax请求里面设置 因为这里每次调用一次  
        //option 都会生成一次 所以刚被选中就又被替换了
    });

    // 下拉框的 change 事件 
    $("select").change(function() {
        var page = $(this).val();
        createProduceList(categoryid, page);
    });
});

// 获取地址栏中的参数的函数  通过正则表达式
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}

// 动态生成页面中的标题
function createProduceTitle(categoryid) {
    $.ajax({
        type: "get",
        url: url + "api/getcategorybyid",
        data: {
            categoryid: categoryid
        },
        success: function(data) {
            $(".active").html(data.result[0].category);
        }
    })
};


// 动态生成商品列表
function createProduceList(categoryid, pageid) {
    $.ajax({
        type: "get",
        url: url + "api/getproductlist",
        data: {
            categoryid: categoryid,
            pageid: pageid
        },
        success: function(data) {
            // 生成模板
            var produceList = Handlebars.compile($("#produceList").html());

            $("#produce ul").html(produceList(data));

            // 总的页数
            var pageTotal = Math.ceil(data.totalCount / data.pagesize);
            // 根据总的页数 动态生成option
            var option = "";
            for (var i = 0; i < pageTotal; i++) {
                option += "<option value='" + (i + 1) + "'>第" + (i + 1) + "页</option>";
            }
            $("select").html(option);
            // 因为每次option都要动态生成 所以需要在这里面通过穿过来的 pageid 来设置哪一个被选中
            // 因为option的索引是从0开始的  而pageid是从1开始的，而且是字符串的形式  
            //所以下面写的是pageid*1-1
            $("option").eq(pageid * 1 - 1).prop("selected", true);

            // 给上一页按钮添加自定义属性 data-page 是当前页的上一页的页码
            // data-tptal 是总的页数
            $(".prov").attr({
                "data-page": pageid - 1,
                "data-total": pageTotal
            });
            // 给下一页按钮添加自定义属性 data-page 是当前页的下一页的页码
            // data-tptal 是总的页数
            $(".next").attr({
                "data-page": pageid * 1 + 1,
                "data-total": pageTotal
            });
            // 和上面一样 选一种就可以 上面是通过输入对象的方式来设置自定义属性
            // $(".prov").attr("data-page", pageid - 1);
            // $(".prov").attr("data-total", pageTotal);
            // $(".next").attr("data-page", pageid * 1 + 1);
            // $(".next").attr("data-total", pageTotal);
        }
    })
};